<template>
	<view class="head">
		<view class="img" @click="back">
			<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/back-arrow.png" mode=""></image>
		</view>
		<view class="message">
			<text>自行检测</text>
		</view>
	</view>
	<view class="body">
		<scroll-view scroll-y="true" class="scrolly-contair" >
			<view class="container">
				<view class="content">
					<view class="xiangmu">
						<view class="xiangmu-left">项目名称:</view>
						<view class="xiangmu-right">新密市某某有限公司</view>
					</view>
					<view class="xiangmu">
						<view class="xiangmu-left">报告编号:</view>
						<view class="xiangmu-right">123456789</view>
					</view>
			
					<view class="xiangmu">
						<view class="xiangmu-left">监测类别:</view>
						<view class="xiangmu-right">废气、废水</view>
					</view>
					<view class="xiangmu">
						<view class="xiangmu-left">受检单位:</view>
						<view class="xiangmu-right">新密市某某有限公司</view>
					</view>
			
					<view class="xiangmu">
						<view class="xiangmu-left">委托单位:</view>
						<view class="xiangmu-right">新密市某某有限公司</view>
					</view>
			
					<view class="xiangmu">
						<view class="xiangmu-left">监测机构:</view>
						<view class="xiangmu-right">河南皖仪检测技术有限公司</view>
					</view>
			
					<view class="xiangmu">
						<view class="xiangmu-left">检测日期:</view>
						<view class="xiangmu-right">2025-10-12</view>
					</view>
					<view class="xiangmu">
						<view class="xiangmu-left">报告日期:</view>
						<view class="xiangmu-right">2025-10-12</view>
					</view>
					<!-- 监测机构资质认定证书 -->
					<view class="pictuer">
						<view class="xx">
							监测机构资质认定证书：
						</view>
						<view class="imgs">
							<image src="" mode=""></image>
						</view>
					</view>
					
					
					<view class="pictuer">
						<view class="xx">
							采样人员照片：
						</view>
						<view class="imgs">
							<image src="" mode=""></image>
						</view>
					</view>
					
					<view class="pictuer">
						<view class="xx">
							采样布点照片：
						</view>
						<view class="imgs uu">
							<image src="" mode=""></image>
							<image src="" mode=""></image>
					        <image src="" mode=""></image>
						</view>
					</view>
					
					
					<view class="pictuer">
						<view class="xx">
							采样过程照片：
						</view>
						<view class="imgs">
							<image src="" mode=""></image>
						</view>
					</view>
					
					
					<view class="pictuer">
						<view class="xx">
							结束照片:
						</view>
						<view class="imgs">
							<image src="" mode=""></image>
						</view>
					</view>
					
					<view class="pictuer">
						<view class="xx">
							检测报告:
						</view>
						<view class="imgs world">
							<!-- <web-view src="https://view.officeapps.live.com/op/embed.aspx?src=https%3A%2F%2Fyourdomain.com%2Freports%2Freport.docx"></web-view> --> 
						</view>
					</view>
					
				</view>
				
			</view>
		</scroll-view>
	
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	let back = () => {
		uni.navigateBack({
			delta: 1,
		})
	}
</script>

<style lang="scss" scoped>
	.scrolly-contair{
		height: calc(100vh - 142rpx);
		overflow: auto;
	}
	.head {
		width: 750rpx;
		height: 142rpx;
		background: #0874FA;
		position: relative;
		overflow: hidden;
	}

	.img {
		width: 22rpx;
		height: 38rpx;
		position: absolute;
		top: 75rpx;
		left: 40rpx;

		image {
			width: 22rpx;
			height: 38rpx;
		}
	}

	.message {
		width: 220rpx;
		height: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		position: absolute;
		top: 75rpx;
		left: 270rpx;

		text {
			display: inline-block;
			width: 220rpx;
			height: 34rpx;
			text-align: center;
			line-height: 34rpx;
		}
	}

	.body {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 750rpx;
		height: 2010rpx;
		background: #FFFFFF;

		.content {
			width: 690rpx;
			// height: 300rpx;
			margin: 0 auto;
			margin-top: 10rpx;

			.xiangmu {
				// width: 500rpx;
				display: flex;
				justify-content: start;
				align-items: center;
				margin-bottom: 40rpx;

				.xiangmu-left {
					width: 149rpx;
					height: 33rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 35rpx;
					color: #666666;
					line-height: 33rpx;
				}

				.xiangmu-right {
					// width: 400rpx;
					height: 35rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					font-size: 35rpx;
					color: #333333;
					line-height: 35rpx;
				}
			}
		}
	}
	.xx{
		width: 390rpx;
		height: 33rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 35rpx;
		color: #666666;
		line-height: 33rpx;
		
	}
	.imgs{
		width: 148rpx;
		height: 148rpx;
		background: #CCCCCC;
		margin-top: 10rpx;
		image{
			width: 148rpx;
			height: 148rpx;
		}
	}
	.pictuer{
		margin-bottom: 20rpx;
	}
	.uu{
		width: 500rpx;
		height: 148rpx;
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		image{
			width: 148rpx;
			height: 148rpx;
			background-color: #CCCCCC;
		}
	}
	.world{
		width: 300rpx;
	}
</style>